<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('学员正式有效订单列表')">

</head>
<body>
<div id="content" class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="box col-md-12" style="padding: 0;margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-list"></i> <span th:text="${param.loginName}"></span>正式有效订单列表
                    </h2>
                    <div class="box-icon">
                        <a href="javascript:void(0);" id="smaller" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search " role="form" th:action="@{'/order/formal/list'}">
                        <select class="selectpicker" name="listGradeId" multiple th:title="请选择年级" data-actions-box="true">
                            <option value="0" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,0)}">无年级</option>
                            <option value="1" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,1)}">一年级</option>
                            <option value="2" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,2)}">二年级</option>
                            <option value="3" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,3)}">三年级</option>
                            <option value="4" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,4)}">四年级</option>
                            <option value="5" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,5)}">五年级</option>
                            <option value="6" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,6)}">六年级</option>
                            <option value="7" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,7)}">初一</option>
                            <option value="8" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,8)}">初二</option>
                            <option value="9" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,9)}">初三</option>
                            <option value="10" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,10)}">高一</option>
                            <option value="11" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,11)}">高二</option>
                            <option value="12" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,12)}">高三</option>
                            <option value="13" th:selected="${listGradeId==null?false:#lists.contains(listGradeId,13)}">成人</option>
                        </select>
                        <select class="selectpicker" name="listAge" multiple th:title="请选择年龄" data-actions-box="true">
                            <option value="0" th:selected="${listAge==null?false:#lists.contains(listAge,0)}">6岁以下和无年龄</option>
                            <option value="6" th:selected="${listAge==null?false:#lists.contains(listAge,6)}">6岁</option>
                            <option value="7" th:selected="${listAge==null?false:#lists.contains(listAge,7)}">7岁</option>
                            <option value="8" th:selected="${listAge==null?false:#lists.contains(listAge,8)}">8岁</option>
                            <option value="9" th:selected="${listAge==null?false:#lists.contains(listAge,9)}">9岁</option>
                            <option value="10" th:selected="${listAge==null?false:#lists.contains(listAge,10)}">10岁</option>
                            <option value="11" th:selected="${listAge==null?false:#lists.contains(listAge,11)}">11岁</option>
                            <option value="12" th:selected="${listAge==null?false:#lists.contains(listAge,12)}">12岁</option>
                            <option value="13" th:selected="${listAge==null?false:#lists.contains(listAge,13)}">13岁</option>
                            <option value="14" th:selected="${listAge==null?false:#lists.contains(listAge,14)}">14岁</option>
                            <option value="15" th:selected="${listAge==null?false:#lists.contains(listAge,15)}">15岁</option>
                            <option value="16" th:selected="${listAge==null?false:#lists.contains(listAge,16)}">16岁</option>
                            <option value="17" th:selected="${listAge==null?false:#lists.contains(listAge,17)}">17岁</option>
                            <option value="18" th:selected="${listAge==null?false:#lists.contains(listAge,18)}">18岁</option>
                            <option value="19" th:selected="${listAge==null?false:#lists.contains(listAge,19)}">19岁</option>
                            <option value="20" th:selected="${listAge==null?false:#lists.contains(listAge,20)}">20岁</option>
                            <option value="21" th:selected="${listAge==null?false:#lists.contains(listAge,21)}">20岁以上</option>
                        </select>
                        <select class="selectpicker" name="listTextbookId" multiple th:title="请选择教材" data-actions-box="true" data-live-search="true" data-live-search-placeholder="搜索教材编号">
                            <option th:each="item:${listTextbook}" th:value="${item.textbookId}" th:text="${item.textbookName}" th:selected="${listTextbookId==null?false:#lists.contains(listTextbookId,item.textbookId)}" ></option>
                        </select>
                        <div class="input-group input-group-sm">
                            <input type="search" name="searchKey" th:value="${searchKey}" id="searchKey" class="form-control" onkeydown="if(event.keyCode==13){$('form').submit();}" placeholder="查询关键字..." style="width:200px;height:34px;margin-bottom: 0 !important;">
                            <span class="input-group-btn">
                                <button class="btn btn-info btn-sm" type="submit" style="height: 34px;"> 查 询</button>
                            </span>
                        </div>
                        <button type="button" class="btn btn-warning btn-sm" style="height: 34px;" onclick="batchChangeNextMaterial()"><span class="glyphicon glyphicon-plus-sign"></span> 切换下一本教材</button>
                    </form>
                    <table class="table table-striped table-bordered table-hover footable" data-show-toggle="false" style="margin-top: 10px;">
                        <thead>
                        <tr>
                            <th class="text-center"><input type="checkbox" name="allchecked" value="0" id="allchecked"></th>
                            <th class="text-center">教材</th>
                            <th class="text-center">学员</th>
                            <th class="text-center" data-breakpoints="xs">姓名</th>
                            <th class="text-center" data-breakpoints="xs">年龄</th>
                            <th class="text-center" data-breakpoints="xs">年级</th>
                            <th class="text-center">套餐名称</th>
                            <th class="text-center" >总课时/币</th>
                            <th class="text-center">已使用数</th>
                            <th class="text-center">剩余数</th>
                            <th class="text-center" data-breakpoints="xs">购买日期</th>
                            <th class="text-center">到期日期</th>
                            <th class="text-center" data-breakpoints="xs">剩余天数</th>
                            <th class="text-center" data-breakpoints="xs">进度完成率</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item,itemStat:${pageInfo.list}">
                            <td class="text-center"><input type="checkbox" name="orderBookId" th:value="${item.orderBookId}"></td>

                            <td th:text="${item.textbookName}"></td>
                            <td class="text-center">
                                <a href="javascript:" th:onclick="|personInfo(${item.personId})|" th:text="${item.loginName}"></a>
                            </td>
                            <td class="text-center" th:text="${item.studentName}"></td>
                            <td class="text-center" th:text="${item.age}"></td>
                            <td class="text-center" th:text="${item.gradeName}"></td>
                            <td class="text-center" th:text="${item.packageName}"></td>
                            <td class="text-center" th:text="${item.lessonCount}"></td>
                            <td class="text-center" th:text="${item.learnedClass.stripTrailingZeros().toPlainString()}"></td>
                            <td class="text-center" th:text="${(item.lessonCount-item.learnedClass).stripTrailingZeros().toPlainString()}"></td>
                            <td class="text-center" th:text="${#dates.format(item.buyTime,'yyyy/MM/dd H:m:s')}"></td>
                            <td class="text-center" th:text="${item.surplusValid}"></td>
                            <td class="text-center" th:text="${item.surplusDay}"></td>
                            <td class="text-center" th:text="${#numbers.formatPercent(item.progress,1,2)}"></td>
                            <td>
                                <button th:if="${session.menuMap[97] != null}"class="btn btn-info btn-xs" th:onclick="|openWindow(this)|" th:data-url="@{'admin/orders_initEditMaterials.action?kcOrders.id='+${item.orderId}}" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 修改教材 </button>
                                <button th:if="${session.menuMap[354] != null}"class="btn btn-primary btn-xs" th:onclick="changeNextMaterial([[${item.orderBookId}]])"  style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 切换下一册教材 </button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script src="../static/js/openPerson.js" th:src="@{/static/js/openPerson.js}" rel="script"></script>
    <script>
        $(function() {
            $('.footable').footable();

            $("#allchecked").click(function (){
                if ($(this).is(":checked")){
                    $(":checkbox").each(function (){
                        $(this).prop("checked",true);
                    });
                }else {
                    $(":checkbox").each(function (){
                        $(this).prop("checked",false);
                    });
                }
            });

            $("input[name='orderBookId']").click(function (){
                if (!$(this).is(":checked")){
                    $("#allchecked").prop("checked",false);
                }else {
                    if ($("input[name='orderBookId']:checked").length===$("input[name='orderBookId']").length){
                        $("#allchecked").prop("checked",true);
                    }
                }
            });
        });

        //打开旧版页面的按钮
        function openWindow(obj) {
            let url="[[${session.oldCrmUrl}]]"+$(obj).data("url")+"&userToken=[[${session.userToken}]]";
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: [0],
                area: ['80%', '90%'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () {
                    // location.reload(true);
                }
            });
        }

        function batchChangeNextMaterial() {
            if($("input[name='orderBookId']:checked").length===0){
                layer.msg("请最少选一个订单进行操作",{icon:2});
                return false;
            }
            layer.confirm('您是否确认需要切换到下一本教材？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                let index=layer.load(3);
                let param=[];
                $("input[name='orderBookId']:checked").each(function (){
                    param.push($(this).val());
                })
                let url="/order/change/next/textbook";
                $.ajax({
                    type:'post',
                    url:url,
                    data:{'orderBookIds' : param.join()},
                    cache:false,
                    dataType:'json',
                    success:function(data){
                        if (data.status===1){
                            if (data.successNum===(data.successNum+data.errorNum)){
                                layer.msg('切换下一本教材成功', {icon: 1},function (){
                                    location.reload();
                                });
                            }else if (data.errorNum===(data.successNum+data.errorNum)){
                                layer.close(index);
                                layer.msg('切换下一本教材失败，请检查教材编号是否规范。', {icon: 2});
                            }else {
                                layer.msg('切换下一本教材成功：'+data.successNum+"，失败："+data.errorNum, {icon: 1},function (){
                                    location.reload();
                                });
                            }
                        }else {
                            layer.close(index);
                            layer.msg(data.errMsg, {icon: 2});
                        }
                    },
                    error : function(xhr, type, exception) {
                        // view("异常！");
                        alert(xhr.responseText, "Failed");
                        // alert("删除数据异常，请与管理员联系！");
                    }
                });
            }, function(){

            });
        }

        function changeNextMaterial(id) {
            layer.confirm('您是否确认需要切换到下一本教材？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                let index=layer.load(3);
                let param=[];
                param.push(id);
                let url="/order/change/next/textbook";
                $.ajax({
                    type:'post',
                    url:url,
                    data:{'orderBookIds' : param.join()},
                    cache:false,
                    dataType:'json',
                    success:function(data){
                        if (data.status===1){
                            if (data.successNum===1){
                                layer.msg('切换下一本教材成功', {icon: 1},function (){
                                    location.reload();
                                });
                            }else {
                                layer.close(index);
                                layer.msg('切换下一本教材失败，请检查教材编号是否规范。', {icon: 2});
                            }
                        }else {
                            layer.close(index);
                            layer.msg(data.errMsg, {icon: 2});
                        }
                    },
                    error : function(xhr, type, exception) {
                        // view("异常！");
                        alert(xhr.responseText, "Failed");
                        // alert("删除数据异常，请与管理员联系！");
                    }
                });
            }, function(){

            });
        }
    </script>

</div>
</body>
</html>